<template>
  <div class="page">
    <div class="flex flex-align-center tips">
      <van-icon
        class="icon"
        name="warning-o"
      />如需退款，请复制订单号，再点击申请退款
    </div>
    <div class="card">
      <div class="card-body">
        <cell label="订单金额">
          <div slot="content" style="font-weight: 600; color: #fa3534">
            ¥{{ info.dep_amount | toFixed }}
          </div>
        </cell>
        <cell label="下单时间" :content="info.pay_date" />
        <cell label="订单编号">
          <div
            slot="content"
            class="flex flex-align-center"
            v-clipboard:copy="info.order_id"
            v-clipboard:success="copySuccess"
          >
            {{ info.order_id }}
            <span class="copy-btn" v-if="info.order_id">复制</span>
          </div>
        </cell>
      </div>
      <div class="flex card-footer">
        <div class="btn" @click="toService">私人客服</div>
        <div class="btn" @click="openRefund">申请退款</div>
      </div>
    </div>
    <div class="footer">
      <a :href="'tel:' + contact">联系我们：{{ contact }}</a>
    </div>
    <refund-modal ref="refund" :order_id="order_id" />
    <complaint-fixed :info="info"/>
  </div>
</template>
<script>
import RefundModal from "./components/refund-modal";
import ComplaintFixed from "./components/complaint-fixed.vue";
export default {
  name: "ad-order",
  components: {
    RefundModal,
    ComplaintFixed,
    Cell: {
      props: {
        label: String,
        content: String,
        contentStyle: Object,
      },
      render() {
        let content = this.$slots.content;
        return (
          <div class="cell">
            <div class="label">{this.label}</div>
            <div class="content" style={this.contentStyle}>
              {content || this.content}
            </div>
          </div>
        );
      },
    },
  },
  metaInfo() {
    return {
      title: "下定详情",
    };
  },
  data() {
    return {
      contact: "13799284006",
      order_id: "",
      info: {},
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      const { merOrderId } = this.$route.query;
      if (!merOrderId) return;
      this.order_id = merOrderId.substring(4);
      const data = await this.$api.getDepositData({
        merOrderId: this.order_id,
      });
      this.info = data;
    },
    copySuccess() {
      this.$toast.clear(true);
      this.$toast.success("复制成功");
    },
    // 私人客服
    toService() {
      // window.location.href = `https://saas.deposit.xmzmmr.com/success3.html?merOrderId=${this.info.order_id}&id=468-57&type=1&page=ads4`;
      const { query } = this.$route;
      this.$router.push({
        path: "/order/service",
        query,
      });
    },
    // 申请退款
    openRefund() {
      this.$refs.refund.open();
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  padding: 0 0.41667rem;
  .tips {
    color: #999;
    font-size: 0.30556rem;
    padding: 0.26667rem 0;
    line-height: 1;
    .icon {
      margin-right: 0.22222rem;
    }
  }
  .card {
    background: #ffffff;
    border-radius: 0.25rem;
    overflow: hidden;
    &-body {
      padding: 0.27778rem 0.41667rem;
      .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #666;
        padding: 0.27778rem 0;
        font-size: 0.36111rem;
      }
      .copy-btn {
        color: #999;
        font-size: 0.27778rem;
        margin-left: 0.16666rem;
      }
    }
    &-footer {
      margin-top: 0.27778rem;
      border-top: $w1px solid #f0f0f0;
      .btn {
        flex: 1;
        text-align: center;
        font-size: 0.333333rem;
        height: 1.22223rem;
        line-height: 1.22223rem;
        cursor: pointer;
        position: relative;
        &:not(:last-child)::after {
          content: "";
          display: inline-block;
          width: $w1px;
          height: 0.361111rem;
          background: #f0f0f0;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: calc(0.8rem + var(--safe-area-inset-bottom) / 2);
    text-align: center;
    width: 100%;
    a {
      color: #999;
      font-size: 0.36rem;
    }
  }
}
</style>
